<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid gray;
        }
    </style>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, point;

        function init(){
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 20, //0.07464553542137146,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508, 20037508.34)
            };
            map = new OpenLayers.Map('map', options);
            var vector = new OpenLayers.Layer.Vector(
                    "Vectors",
                    {isBaseLayer: true}
            );
            map.addLayer(vector);

            var x =  -20000;//4.33791754;
            var y = 20000;
            point = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(x, y)
            );
            
            map.addLayer(vector);
            vector.addFeatures([point]);
            map.setCenter(new OpenLayers.LonLat(0, 0), 5);
        }
        
        function pan(){
            map.panTo(point.geometry.getBounds().getCenterLonLat());
        }

    </script>
  </head>
  <body onload="init()">
    <h3 id="title">SVG inValidRange Redraw Test Case</h3>
    <p>Before fixing #1631, after klicking Go! no point would have appeared. The Go! button
    pans the map over a long distance. Before dragging, the point would have been
    outside the valid range, and the pan operation would not have triggered the SVG
    coordinate system to be recreated. The new vector rendering takes care of all this. </p>
    <div id="map"></div>
    <input type="button" value="Go!" onclick="pan();"></input>
  </body>
</html>
